<template>
  <div class="swiperSlide">
    <Swiper :img_src='img_src' :height='height'></Swiper>
    <div class="center">
      <div class="priceMask">
        <div class="mask-content">
          <div class="top">
            免费在线智能报价
          </div>
          <div class="top-form">
            <form action="">
              <div class="form-group">
                <label for="addres">所在地区<span class="input-sign">﹡</span></label>
                <select name="addres" id="addres" class="form-input"> 
                  <option value="0">上海</option>
                  <option value="1">北京</option>
                </select> 
              </div>
              <div class="form-group">
                <label for="area">房屋面积<span class="input-sign">﹡</span></label>
                <input type="text" class="form-input area" name="area" id="area" placeholder="请输入面积">
                <span class="area-m2">m<sup>2</sup></span>
              </div>
              <div class="form-group">
                <label>装修程度<span class="input-sign">﹡</span></label>
                <div class="level">
                  <div class="level-left" :class="{'trim-public': isTrim}" @click="clickTrim(0)">豪华装修</div>
                  <div class="level-right" :class="{'trim-public': !isTrim}" @click="clickTrim(1)">经济装修</div>
                </div>
              </div>
              <div class="form-group">
                <label for="phone">手机号<span class="input-sign">﹡</span></label>
                <input type="text" class="form-input" name="phone" id="phone" placeholder="报价结果将发送您的手机">
              </div>
              <button type="submit" class="count">开始计算</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from '@/components/Swiper.vue'
import swiper1 from './img/swiper1.jpg'
import swiper2 from './img/swiper2.jpg'
import swiper3 from './img/swiper3.jpg'

export default {
    name: 'swiperSlide',
    components: {
      Swiper
    },
    data() {
      return {
        isTrim: true,
        trim_id: 0,
        img_src: [
          swiper1,
          swiper2,
          swiper3,
        ],
        height: '400px'
      }
    },
    methods: {
      clickTrim(i) {
        if (i === 0) {
          this.isTrim = true
          if (this.trim_id !== i) {
            this.trim_id = i
          }
        } else if (i === 1) {
          this.isTrim = false
          if (this.trim_id !== i) {
            this.trim_id = i
          }
        }
      }
    }
  }
</script>
<style scoped lang="scss">
.swiperSlide {
  position: relative;
  .center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 84%;
    margin: 0 auto;
    .priceMask {
      width: 340px;
      height: 400px;
      float: right;
      background-color:rgba(6, 6, 6, 0.5);
      color: #fff;
      .mask-content {
        margin: 30px 30px 0 30px;
        .top {
          text-align: center;
          font-size: 22px;
          margin-bottom: 30px;
        }
        .form-group {
          height: 30px;
          line-height: 30px;
          margin: 26px 0;
          display: flex;
          justify-content: space-between;
          .input-sign {
            color: $mate-color;
            font-size: 20px;
          }
          .form-input {
            width: 188px;
            border: none;
            outline: 0;
            border-radius: 4px;
            text-indent: 10px;
          }
          .area {
            position: relative;
          }
          .area-m2 {
            position: absolute;
            color: #2C2C2C;
            right: 40px;
            line-height: normal;
          }
          .level {
            display: flex;
            justify-content: space-between;
            width: 188px;
            color: #C7C7C7;
            font-size: 14px;
            .level-left {
              width: 49%;
              cursor: pointer;
              text-align: center;
              background: #fff;
              border-radius: 4px;
            }
            .level-right {
              width: 49%;
              cursor: pointer;
              text-align: center;
              background: #fff;
              border-radius: 4px;
            }
          }
        }
        .count {
          width: 100%;
          height: 40px;
          line-height: 40px;
          border: none;
          outline: 0;
          border-radius: 100px;
          background: #3E67FF;
          color: #fff;
          cursor: pointer;
        }
        .count:hover {
          box-shadow: 0 8px 16px 0 #fff, 0 6px 10px 0 #fff;
          transition: all .3s;
        }
      }
    }
  }
}
.trim-public {
  background-image: url("./img/trim2x.png") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  color: #060606;
  font-weight: bold;
}
</style>
